<template>
	<view class="LoginPage">
		<view class="logoImage">
			<image class="Logo" src="../../static/image/Logo/logo.png"></image>
		</view>
		<!-- 	<view class="formTitle">
				登录
			</view> -->
		<!-- 全局背景 -->
		<view class="back"></view>
		<view class="login-container">
			<!-- TAB栏 -->
			<view class="tab-bar">
				<view :class="{ 'tab-active': activeTab === 'password' ,'common':true}" @click="switchTab('password')">
					密码登录
				</view>
				<view :class="{ 'tab-active': activeTab === 'captcha' ,'common':true}" @click="switchTab('captcha')">
					验证码登录
				</view>
			</view>

			<!-- 登录表单 -->
			<form class="login-form" @submit="login">
				<!-- 表单输入框 -->
				<input v-if="activeTab === 'password'" type="text" placeholder="请输入手机号" name="phoneNumber"
					v-model="phoneNumber" class="input-field" />

				<input v-else type="text" placeholder="请输入手机号" name="phoneNumber" v-model="phoneNumber"
					class="input-field" />

				<input v-if="activeTab === 'password'" type="password" placeholder="请输入密码" name="password"
					v-model="password" class="input-field" />

				<view v-else class="verification-code">
					<input type="text" placeholder="请输入验证码" name="verificationCode" v-model="verificationCode"
						class="input-field input-verification-code" />
					<view v-if="!counting" class="send-verification-code" @click="startCountdown"
						:class="{ 'disabled': counting }">
						{{ counting ? `${countdown}秒后重试` : '发送验证码' }}
					</view>

					<view v-else class="send-verification-code disabled">{{ countdown }}秒后重试</view>
				</view>



				<!-- 		<view class="radio-group">
					<radio-group class="radioGroup" @change="handleChange">
						<view>
							<radio value="user" checked="true" color="#FFCC33" />
							<text>用户</text>
						</view>
						<view>
							<radio value="repairman" color="red" />
							<text>维修员</text>
						</view>
					</radio-group>
				</view> -->



				<!-- 登录按钮 -->
				<button class="login-button" form-type="submit">登录</button>

				<view class="BottomJump">
					<view class="goToRegister" @click="goToRegister">
						注册>>
					</view>
					<view class="ForgotPassword" @click="gotoFindPassword">
						忘记密码？
					</view>
				</view>
			</form>

			<!-- 	{{phoneNumber}}
			{{password}}
			{{verificationCode}}
			{{chooseRole}} -->
		</view>
	</view>
</template>

<script>
import {
		PasswordLoginRequest,
		VerificationCodeLoginRequest
	} from '@/api/loginPageApi.js';
	
	import { 
		SendVerificationCodeRequest
		} from '@/api/SendVerificationCodeApi.js';
		
	import MyStore from '@/store/index.js';


	export default {
		data() {
			return {
				activeTab: 'password', //登录方式
				// chooseRole: 'user', //登录时不改角色，默认角色为user
				phoneNumber: '', //输入的手机号
				password: '', //输入的密码
				verificationCode: '', //输入的验证码
				counting: false, //是否倒计时中？
				countdown: 60, //倒计时长
				role: ''
			};
		},
		onLoad() {
			const userData = uni.getStorageSync('userData');
			console.log("user登录记录", userData); // 输出: user登录记录
			if (userData != "" && userData.role == 'user') {
				uni.switchTab({
					url: '/pages/index/index'
				})
			} else if (userData != "" && userData.role == 'employee') {
				uni.redirectTo({
					url: '/pages/maintenance-worker/maintenance-worker'
				})
			}
		},
		methods: {
			/**
			 * @param {Object} tab 切换登录方式
			 */
			switchTab(tab) {
				this.activeTab = tab;
			},
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},
			gotoFindPassword() {
				uni.navigateTo({
					url: '/pages/forget/forget'
				})
			},

			/**
			 * 手机号校验
			 */
			validatePhoneNumber() {
				// 长度校验
				if (this.phoneNumber.length !== 11) { // 注意这里使用 !== 表示不等于
					return false;
				}

				// 格式校验，使用正则表达式进行判断
				const regex = /^[1-9]\d{10}$/; // 正则表达式匹配11位数字
				if (!regex.test(this.phoneNumber)) {
					return false;
				}

				return true;
			},

			/**
			 * 密码校验
			 */
			validatePassword() {
				// 长度校验
				if (this.password.length < 6 || this.password.length > 20) {
					return false;
				}

				// 格式校验，这里使用正则表达式进行判断，可以根据需求进行修改
				const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$/; // 格式校验，要求包含大小写字母和数字
				if (!regex.test(this.password)) {
					return false;
				}

				return true;
			},

			/**
			 * @param {Object} message 提示框
			 */
			showAlert(message) {
				uni.showToast({
					title: message,
					icon: "none",
					duration: 2000,
					image: '../../static/tip.png',
					position: 'top'
				});
			},



			login(formData) {
				console.log("表单提交的数据:", formData.detail) //表单提交的数据
				console.log("表单提交的数据:", formData.detail.value) //表单提交的数据

				if (this.activeTab === "password") {
					// 校验手机号和密码字段
					if (!this.validatePhoneNumber()) {
						this.showAlert("请输入11位的手机号码");
						return;
					}

					if (!this.validatePassword()) {
						this.showAlert("请输正确的密码，包含大小写字母和数字");
						return;
					}



					// 18786434920  Ldy21787
					// this.showAlert("调用密码登录的接口");

					console.log("登录提交数据：", this.password, this.phoneNumber);

					PasswordLoginRequest(this.password, this.phoneNumber);
					// let that = this;
					// uni.showLoading({
					// 	title: '登录中'
					// });
					// setTimeout(function() { //延时2秒登录
					// 	uni.request({
					// 		// 发送到后端url中的login
					// 		url: `http://47.115.211.73:8080/login?username=${that.phoneNumber}&password=${that.password}`,
					// 		method: "POST",
					// 		success: function(res) {
					// 			console.log("登陆返回的数据", res)
					// 			if (res.data.code == 200 && res.data.data.role == 'user') {
					// 				// 使用vuex存储共享数据
					// 				MyStore.dispatch('setCurrentUserDatasAsync', res.data)
					// 				console.log("测试存储：", MyStore.getters.getCurrentUserDatas);
					// 				uni.switchTab({
					// 					url: '/pages/index/index'
					// 				});
					// 			} else if (res.data.code == 200 && res.data.data.role == 'employee') {
					// 				console.log("维修员登陆成功")
					// 			} else {
					// 				uni.showToast({
					// 					title: '手机号或密码错误',
					// 					icon: "error",
					// 					duration: 2000
					// 				});
					// 			}
					// 		},
					// 		fail(err) {
					// 			uni.showToast({
					// 				title: '登陆请求失败',
					// 				icon: "error",
					// 				duration: 2000
					// 			});
					// 			console.log("请求失败", err)
					// 		}
					// 	})
					// 	uni.hideLoading(); //隐藏showLoading
					// }, 2000);




				} else {
					// 校验手机号和验证码字段
					if (!this.validatePhoneNumber()) {
						this.showAlert("请输入11位的手机号码");
						return;
					}

					if (!this.verificationCode) {
						this.showAlert("请输入验证码");
						return;
					}

					// uni.showLoading({
					// 	title: '登录中'
					// });

					// this.showAlert("调用验证码登录的接口");
					// VerificationCodeLoginRequest(this.chooseRole,this.phoneNumber,this.verificationCode)
					VerificationCodeLoginRequest(this.phoneNumber, this.verificationCode)
					// let that = this;
					// uni.showLoading({
					// 	title: '登录中'
					// });
					// setTimeout(function() { //延时2秒登录
					// 	uni.request({
					// 		// 发送到后端url中的login
					// 		url: `http://47.115.211.73:8080/login?username=${that.phoneNumber}&password=${that.verificationCode}`,
					// 		// url: `http://127.0.0.1:8080/login?username=${that.phoneNumber}&password=${that.verificationCode}`,
					// 		method: "POST",
					// 		success: function(res) {
					// 			console.log("登陆返回的数据", res)
					// 			if (res.data.code == 200 && res.data.data.role == 'user') {
					// 				// 使用vuex存储共享数据
					// 				MyStore.dispatch('setCurrentUserDatasAsync', res.data)
					// 				console.log("测试存储：", MyStore.getters.getCurrentUserDatas);
					// 				uni.switchTab({
					// 					url: '/pages/index/index'
					// 				});
					// 			} else if (res.data.code == 200 && res.data.data.role == 'employee') {
					// 				console.log("维修员登陆成功")
					// 			} else {
					// 				uni.showToast({
					// 					title: '手机号或验证码错误',
					// 					icon: "error",
					// 					duration: 2000
					// 				});
					// 			}
					// 		},
					// 		fail(err) {
					// 			uni.showToast({
					// 				title: '登陆请求失败',
					// 				icon: "error",
					// 				duration: 2000
					// 			});
					// 		}
					// 	})
					// 	uni.hideLoading(); //隐藏showLoading
					// }, 2000);


				}

			},
			/**
			 * @param {Object} e 切换角色
			 */
			// handleChange(e) {
			// 	this.chooseRole = e.detail.value;
			// 	console.log(this.chooseRole)
			// },

			/**
			 * 开始倒计时/发送验证码
			 */
			startCountdown() {
				// 校验手机号 18786434920
				if (!this.validatePhoneNumber()) {
					this.showAlert("请输入11位的手机号码");
					return;
				}


				// this.showAlert("调用后端接口，通过运营商拿取验证码");
				SendVerificationCodeRequest(this.phoneNumber);

				// let that = this
				// uni.request({
				// 	// 发送到后端url中的login
				// 	url: `http://47.115.211.73:8080/user/${that.phoneNumber}`,
				// 	// url: `http://127.0.0.1:8080/user/${that.phoneNumber}`,
				// 	method: "GET",
				// 	success: function(res) {
				// 		console.log("发送返回的数据", res)
				// 	},
				// 	fail(err) {
				// 		console.log("请求失败", err)
				// 	}
				// })





				if (!this.counting) {
					this.counting = true;
					const timer = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown -= 1;
						} else {
							this.counting = false;
							this.countdown = 60; // 重置倒计时
							clearInterval(timer); // 清除定时器
						}
					}, 1000);
				}
			},
		}
	};
</script>






<style scoped lang="scss">
	page {
		// background-color: #333333;
	}

	.LoginPage {
		// background-color: #333333;
		// border: 1px solid black;

		.logoImage {
			.Logo {
				background-color: #333333;
				position: fixed;
				top: 20%;
				left: 50%;
				transform: translate(-50%, -40%);
				width: 750rpx;
				height: 550rpx;
				z-index: 20;
			}
		}

		.back {
			background-color: #333333;
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
		}

		// .formTitle{
		// 	color: white;
		// 	position: fixed;
		// 	top: 30%;
		// 	left: 10%;
		// 	font-size: 80rpx;
		// }

		.login-container {
			z-index: 99;
			background-color: #333333;
			border-left: 1rpx solid #feb51d;
			border-right: 1rpx solid #feb51d;
			border-radius: 20rpx;
			// box-shadow: 10rpx 10rpx 8rpx #afafaf;
			box-sizing: border-box;
			padding: 50rpx;
			width: 600rpx;
			height: 570rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -30%); //绝对值由小到大==>左右 下上



			.tab-bar {
				display: flex;
				justify-content: space-around;
				font-size: 32rpx;

				.common {
					width: 200rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: white;
				}

				.tab-active {
					color: #ffb612;
					// background-color: #E6F7FF;
					border-bottom: 7rpx #ffb612 solid;
				}
			}


			.login-form {
				margin-top: 40rpx;

				.input-field {
					width: 100%;
					height: 80rpx;
					margin-top: 30rpx; //必须与verification-code的同一样式同步
					margin-bottom: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #ffb612;
					color: white;
					// border-radius: 10rpx;
				}

				.verification-code {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					// 验证码输入框
					.input-verification-code {
						height: 80rpx;
						margin-bottom: 0;
						margin-top: 0;
						margin-right: 20rpx;
					}

					// 密码发送按钮
					.send-verification-code {
						height: 70rpx;
						width: 300rpx;
						padding: 0;
						font-size: 30rpx;
						color: #ffb612;
						border: none;
						border-radius: 5px;
						display: flex;
						justify-content: center;
						align-items: center;
						// background-color: #ff00ff;
					}
				}

				.disabled {
					cursor: not-allowed; //当鼠标光标悬停在该元素上方时，光标将变为禁止符号
				}

				// .radioGroup {
				// 	margin: 30rpx 0;
				// 	display: flex;
				// 	justify-content: space-around;
				// }

				.login-button {
					width: 100%;
					height: 80rpx;
					background-color: #ffb612;
					color: white;
					border: none;
					border-radius: 10rpx;
					cursor: pointer;

					&:active {
						background-color: #4095E5;
					}

					;
				}

				.BottomJump {
					margin: 20rpx 0;
					display: flex;
					justify-content: space-between;
					font-size: 35rpx;
					color: #ffb612;
				}
			}
		}

	}
</style>
